<template>
    <div class="link">
        <div class="link-top">
            <img src="@/assets/image/part1.jpg" alt="">
            猜你喜欢
        </div>
        <ul>
            <li class="link-item border-bottom"
            v-for="item in linkList" 
            :key="item.id"
            @click="toDatails"
            >
                <div class="link-img">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="link-text">
                    <div class="link-title">
                        {{item.title}}
                    </div>
                    <div class="link-message">
                        {{item.msg}}
                    </div>
                    <div class="link-map">
                        <span class="link-mark">￥<b>{{item.pre}}</b></span>
                         <span class='link-item-map'>{{item.map}}</span>
                    </div>
                </div>
            </li>
            
        </ul>
    </div>
</template>
<script>
export default {
    props:["linkList"],
    data(){
        return{
            
        }
    },
    methods:{
        toDatails(){
            this.$router.push("/detail")
        }
    }
}
</script>
<style scoped>

.link{
margin-top: .2rem;
font-size: .28rem;
background: #fff;
padding:0 .2rem;
}
.link-top{
    margin: .2rem 0;
    font-size: .32rem;
}
.link-top img{
    width: .3rem;
    height: .3rem;

}
.link-item{
    position: relative;
    overflow: hidden;
    padding:  .2rem 0;
}
.link-img{
    float: left;
}
.link-img img{
    width: 2rem;
    height: 2rem;
}
.link-text{
    overflow: hidden;
    padding-left: .22rem;
}
.link-title{
    
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap; 
    /* display:-webkit-box; */
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
    
    font-size: .36rem;
    color: #212121;
    margin-top: .4rem;
}
.link-message{
    margin-top: .3rem;
    color: #616161;
    font-size: .24rem;
}
.link-map{
    margin-top: .3rem;
    color: #616161;
    position: relative;
}
.link-mark{
    color: #ff8300;
}
.link-mark b{
    font-size: .4rem;
}
.link-item-map{
    
    font-size: .28rem;
    position: absolute;
    right: 0;
    /* bottom: .25rem; */
    top:.1rem;
}
</style>